<!DOCTYPE html>

<html lang="ja">
    <head>
        <meta charset="utf-8"> 
        <title>HTML5 Canvas で Polygon(多角形)描画</title>
        <style>
            body {
                font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif;
            }
            canvas {
                box-shadow: 0px 0px 4px 0px black;
            }
        </style>
        <script src="tm.polygon.js" charset="UTF-8"></script>
        <script>
            window.onload = function(){
                var canvas = document.getElementById("c");
                var context= canvas.getContext("2d");
                var radius = 50;
                var draw = function() {
                    for (var i=0; i<10; ++i) {
                        
                        context.fillStyle = context.strokeStyle = "hsl(" + 360/10*i + ", 75%, 50%)";
                        var x = (i%5)*120 + 20 + radius;
                        var y = Math.floor(i/5)*120 + 15 + radius;
                        // ポリゴンをストローク描画
                        strokePolygon(context, x, y, radius, i+3, 270);
                        // ポリゴンを塗りつぶし描画
                        fillPolygon(context, x, y+240, radius, i+3, 270);
                    }
                };
                draw();
            };
        </script>
    </head>
    <body>
        <h2>HTML5 Canvas で Polygon(多角形)描画</h2>
        <canvas id="c" width=640 height=480></canvas>
    </body>
</html>